parcel: Dynamic import doesn't work?

almost one year and this still hasnt been fixed lmao

I doubt this issue is completely fixed. Even on parcel v2 (using v2.3.2).

Here is my error message.

TypeError: Cannot read properties of undefined (reading 'schema')
    at /server/dist/server.generated.js:4608:91

I have a peice of code doing something like this. Esentially, it’s importing a model file that has a mongoose schema defined depending on the type of request.

const importModel = async (modelName) => {
  try {
    let model;
    console.log(modelName);
    if (modelName) {
      model = await import(`../models/${modelName}.model`);
    } else {
      model = await import(`../models/user.model`);
    }
    return await model;
  } catch (err) {
    return err;
  }
};

But when I import all my models beforehand at the top of the file. It works just as expected.

import(`../models/user.model`);
import(`../models/post.model`);
import(`../models/comment.model`);

This leads me to believe dynamic imports are still not fixed 100%. Please correct me if I’m wrong. The app also works fine when I use babel nodemon --exec babel-node server.js;

Any resolution as of yet? 1.9.1 still has issues with dynamic imports (for react-loadable)

Minimal reproducible example is here. It starts happening when I include CSS file in index.html and have dynamic imports in my root JS file.

Sorry. I forgot to share my experience. I approached it in the same way as the above reproductions. I solved the problem in a temporary way as follows.

“This error occurs only with asynchronously imported static files, Create a central path management js file that has all of your static file paths.Never asynchronously import manager files that have all those path information, but manage to access them through those manager files when writing static files.”

@devongovett yes, confirmed in my case

but also I’m not able to import an svg file it says something like

// index.js
import('./icon.svg').then(v => console.log(v))

==>

Uncaught (in promise) Error: Cannot find module 'icon.svg'

I just tried below code. Works without any issue.

import('@material-ui/core/styles/createMuiTheme').then(
  ({ default: createMuiTheme }) => {
    console.log(createMuiTheme)
  },
)

Hey guys, getting sort of the same problem, the built passes, but I get the following error on the web console: Uncaught Error: Cannot find module 'Loader.844c947a.js,7,Loader.844c947a.map,7' at newRequire (loader.1eaab585.js:39)

Using: "react-loadable": "5.4.0" "babel-plugin-syntax-dynamic-import": "6.18.0", "parcel-bundler": "^1.8.1"

Maybe I should name my imports with react-loadable somehow? or change my babel-plugin

Code

// Loader.js

import React from 'react';

const Loader = () => {
  return (
    <div>LOADER LOADER</div>
  )
};

export default Loader;

// App.js

import React from 'react';
import Loadable from 'react-loadable';
import Loader from './components/Loader/Loader';

const LoadableComponent = Loadable({
  loader: () => import('./components/Loader/Loader'),
  loading: () => <div>Loading...</div>,
  delay: 300,
});

const App = () => {
  return (
    <div>
      <p>This is the App view</p>
      <LoadableComponent />
    </div>
  )
}

export default App;

@ranfdev my parcel version is 1.8.1 on mac pro,it works as you say that remove the css file.

// Demo.jsx
import React from 'react';

function Demo() {
  return <div className="name">Hello qiqi</div>;
}

export default Demo;

// Home.jsx
...
import Loadable from 'react-loadable';
const LoadableComponent = Loadable({
  loader: () => import('../Box/Demo'),
  loading: () => <div>Loading...</div>,
})
...

Interesting +1 👍

I’m not sure if Parcel has (haven’t gotten through entire codebase yet) support for what webpack call’s ContextModules. I’m happy to help team understand how it works if they want to RFC/Propose implementing it.

@hmmhmmhm it would be more helpful if you included a reproduction step, detailed errors, etc. Otherwise you might as well add an emoji to the issue description to vote for the issue.

still no fiix about this error? It’s almost 2020 year and I’m going through this error again today.

I’ve also faced this bug. Looks like it happens when you try to import the same static file in 2 dynamically loaded modules. The asset is added to dependencies only for the first module. So, if you skip loading of the first module and just load the second one then you get this error. Here is my example: https://github.com/ArtemZag/parcel-dynamic-import-bug There are 2 scripts: “yarn try-ok” & “yarn try-bug”

Bug (at least in @dantesolis case) appears to be related to the async imported module also being included in the bundle synchronously. There is both import Loader from './components/Loader/Loader'; and import('./components/Loader/Loader') in the example. If you remove the sync import it works. Does this match up with other people’s issues?

The problem is even worse in the latest version (1.8.1). I can build my app using 1.7.1, but with 1.8.1 i get the error Cannot find module '16'. This time i don’t have any css file. I don’t know how to reproduce this, i’m not doing anything strange, it’s just a normal app using code splitting. I’m building with the cache disabled

I get the same error, but only when i’m building. When i run parcel index.html everything works, but if i run parcel build index.html i get that error message in some of the splitted chunks. I’m using parcel 1.6.2 on elementary os (based on ubuntu). Interesting: by removing the imports related to css files in the chunks, it works.