storybook: Uncaught Error: Target container is not a DOM element.

If there is someone who hasn’t fix the problem jet, check the order of your tag elements in html. For example I wrote ( accidentally )

    <script src="/app/something.js"></script>
    <div id="root"> x </div>

But the script tag should be below the DOM element. I’ve lost 2h on this 😕 Cheers!

You don’t have to remove the file loader, just exclude *.ejs:

{
  exclude: [
    /\.html$/,
    /\.(js|jsx)$/,
    /\.css$/,
    /\.scss$/,
    /\.json$/,
    /\.bmp$/,
    /\.gif$/,
    /\.jpe?g$/,
    /\.png$/,
+   /\.ejs$/,
  ],
  loader: 'file-loader',
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
},

Thank you, I have found the solution to the problem thanks to your reproduction repo ❤️

Here’s the required change: https://github.com/aaronfullerton/storybook-issue-2615/pull/1

@ndelangen sure, You can try this: https://github.com/aaronfullerton/storybook-issue-2615

I pulled this from our existing codebase and attempted to remove as much noise as possible. My apologies if there’s still a bit of unnecessary code in there.

It looks like an error indicating the “root” dom element for targeting/mounting from js was not found.

Check in your html file if the id attribute has the same name as ReactDOM.render(<App />, document.getElementById(‘index’));

What if my webpack config doesn’t use file-loader and I’m seeing this?

Running:

    "@storybook/addon-actions": "^3.3.15",
    "@storybook/addon-info": "^3.3.15",
    "@storybook/addon-links": "^3.3.15",
    "@storybook/addon-options": "^3.3.15",
    "@storybook/addons": "^3.3.15",
    "@storybook/react": "^3.3.15",

Webpack config:

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.yaml$/,
        loaders: ['json-loader', 'yaml-loader'],
        include: path.resolve(__dirname, '../../i18n')
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)$/,
        use: {
          loader: 'url-loader',
          query: {
            limit: 30000,
            name: '[name].[ext]',
          },
        },
      },
    ],
  },
};

storybook .babelrc

{
  "presets": ["react-app"],
  "plugins": [
    ["emotion", { "autoLabel": true }],
    "jsonify-css"
  ]
}

Excellent, thank you. I can confirm this solves the problem. I’ll look into updating the docs to indicate this.

is this the same issue? i have the right lines of code but it doesnt resolve, is it a webpack error?

I am having this exact same problem apparently because I am changing the id of root to app-root. I am doing this because I would like the dom in my storybook to look just like the dom of my application. This also makes it easier to test modals and so on. Currently I am doing this via a global decorator that basically does this:

const appRoot = document.getElementById('root');

appRoot.setAttribute('id', 'app-root');

Is there any better way of doing this?